<template>
    <dd-tab slider="underline" class="my-tab">
        <dd-item>item-1</dd-item>
        <dd-item>item-2</dd-item>
        <dd-item>item-3</dd-item>
    </dd-tab>
    <dd-tab slider="circle" class="my-tab">
        <dd-item>item-1</dd-item>
        <dd-item>item-2</dd-item>
        <dd-item>item-3</dd-item>
    </dd-tab>
    <dd-tab slider="square" class="my-tab">
        <dd-item>item-1</dd-item>
        <dd-item>item-2</dd-item>
        <dd-item>item-3</dd-item>
    </dd-tab>
    <dd-tab slider="border" class="my-tab">
        <dd-item>item-1</dd-item>
        <dd-item>item-2</dd-item>
        <dd-item>item-3</dd-item>
    </dd-tab>
</template>
<style>
.my-tab {
    --nav-item-gap: 1em;
    --nav-item-padding: 0.5em 1em;
}
</style>
